<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">

			.baba{
				width: 800px;
				height: 600px;
				border: 1px solid red;
				background: yellow;
				position: relative;
				margin: 20px auto;
			}
			.son{
				width: 20px;
				height: 20px;
				background: gray;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			.box{
				width: 20px;
				height: 20px;
				background: green;
				position: absolute;
				top: 400px;
				left: 400px;
			}
			.order{
				width: 20px;
				height: 20px;
				background: red;
				position: absolute;
				top: 580px;
				left: 780px;
			}

			.wall{
				position: absolute;
				left: 200px;
				top: 300px;
			}
		</style>
		<div class="baba">
			<div class="son">
				
			</div>
			<div class="box">
				
			</div>
			<div class="order">
				
			</div>
		</div>
		<script type="text/javascript">
			/*
			 * 1.获取用户按键
			 * 2.根据用户按键控制son的坐标(20为一步)
			 * 3.不能让son出到baba的外面
			 */
			 var baba = document.querySelector('.baba');
			 var son = document.querySelector('.son');
			 var box = document.querySelector('.box');
 			 son.style.top = son.offsetTop + 'px';
			 son.style.left = son.offsetLeft + 'px';

			 box.style.top = box.offsetTop + 'px';
			 box.style.left = box.offsetLeft + 'px';



 			 //方向键控制移动
 			 document.documentElement.addEventListener('keydown', function (e) {
		 		switch ( true ) {
			 		case e.keyCode == 38 : {  //上
			 			son.style.top = parseInt(son.style.top) - 20 + 'px'; // son向上移动
			 			if ( parseInt(son.style.top) < 0 ){ // 防止son向上移动时冲出baba
							 son.style.top = 0 + 'px';
			 			}

			 			if ( box.offsetTop > son.offsetTop ) break; //防止在向上推箱子的时候 触发向下推的箱子

			 			var l = box.offsetLeft - 10; //向上推箱子触发的横向条件
			 			var r = box.offsetLeft + 10;

			 			//判断son的横坐标是否在可以推box的范围内
			 			//box 在 son的上面，son是否重叠一部分纵轴方向加20px的box上
			 			// box的垂直偏移量不等于baba的高度-20
			 			
		 					if ((box.offsetTop + 20) > son.offsetTop && (son.offsetLeft >= l && son.offsetLeft <= r)){

			 					box.style.top = son.offsetTop - 20 + 'px';
			 					if ( box.offsetTop < 0){
				 					box.style.top = 0 + 'px';
				 					son.style.top = 20 + 'px';	
					 			}
		 					}
		 				
			 			break;
			 		}

			 		case e.keyCode == 37 : { //左
			 			son.style.left = parseInt(son.style.left) -20 + 'px';

			 			if ( parseInt(son.style.left) < 0){
			 				 son.style.left = 0 + 'px';
			 			}


			 			var t = box.offsetTop - 10; //向左推箱子触发的纵向条件
			 			var b = box.offsetTop + 10;
			 			if ( box.offsetLeft > son.offsetLeft ) break;

			 			if ( son.offsetLeft < (box.offsetLeft + 20) &&  (son.offsetTop >= t  && son.offsetTop <= b )){
		 						box.style.left = son.offsetLeft - 20 + 'px';
		 						if ( box.offsetLeft <= 20 ){   //son向下推box,防止son和box冲出baba
				 					box.style.left = 0 + 'px';
				 					son.style.left = 20 + 'px';	
				 				}
			 			}

			 			break;
			 		}

			 		case e.keyCode == 39 : { //右
			 			son.style.left = parseInt(son.style.left) + 20 + 'px';       			 			

			 			if ( parseInt (son.style.left) >= baba.clientWidth){
			 				 son.style.left = (baba.clientWidth - 20) + 'px';
			 			}


			 			var t = box.offsetTop - 10; //向右推箱子触发的纵向条件
			 			var b = box.offsetTop + 10;

			 			if ( box.offsetLeft < son.offsetLeft ) break;


			 			if ( son.offsetLeft > (box.offsetLeft - 20) &&  (son.offsetTop >= t  && son.offsetTop <= b )){
		 						box.style.left = son.offsetLeft + 20 + 'px';
		 						if ( box.offsetLeft >= baba.clientWidth - 20){   //son向下推box,防止son和box冲出baba
				 					box.style.left = (baba.clientWidth - 20) + 'px';
				 					son.style.left = (baba.clientWidth - 40) + 'px';	
				 				}
			 			}


			 			break;
			 		}

			 		case e.keyCode == 40 : { //下
			 			son.style.top = parseInt(son.style.top) + 20 + 'px'; //son向下移动
			 			if ( son.offsetTop >= (baba.clientHeight - 20) ){ //防止son向下移动时冲出baba
			 				son.style.top = baba.clientHeight - 20 + 'px';		 			
			 			}
			 			var l = box.offsetLeft - 10; //向下推箱子触发的横向条件
			 			var r = box.offsetLeft + 10;

			 			if ( box.offsetTop < son.offsetTop ) break;//防止在向下推箱子的时候 触发向上推的箱子

			 			//判断son的横坐标是否在可以推box的范围内
			 			//box 在 son的下面， son是否重叠一部分纵轴方向减20px的box上
			 			// box的垂直偏移量不等于0

		 				if ((box.offsetTop - 20) < son.offsetTop && (son.offsetLeft >= l && son.offsetLeft <= r)){ 					

		 						box.style.top = son.offsetTop + 20 + 'px';
		 				
		 					if ( box.offsetTop >= baba.clientHeight - 20){   //son向下推box,防止son和box冲出baba
			 					box.style.top = (baba.clientHeight - 20) + 'px';
			 					son.style.top = (baba.clientHeight - 40) + 'px';	
				 			}
		 				}

		 			
			 			break;
			 		}
			 }
			 
			 });
			
 			
		
		</script>
	</body>
</html>
